{% extends "stock/item_base.html" %}

{% load static %}
{% load inventree_extras %}
{% load i18n %}
{% load l10n %}

{% block sidebar %}
{% include "stock/stock_sidebar.html" %}
{% endblock sidebar %}

{% block page_content %}

<div class='panel panel-hidden' id='panel-history'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Stock Tracking Information" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='tracking-table-toolbar'>
            {% include "filter_list.html" with id="stocktracking" %}
        </div>
        <table class='table table-condensed table-striped' id='track-table' data-toolbar='#tracking-table-toolbar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-allocations'>

    {% if item.part.component %}
    <div class='panel-heading'>
        <h4>{% trans "Build Order Allocations" %}</h4>
        {% include "spacer.html" %}
    </div>
    <div class='panel-content'>
        <div id='build-order-allocations-toolbar'>
            {% include "filter_list.html" with id="buildorderallocation" %}
        </div>
        <table class='table table-striped table-condensed' data-toolbar='#build-order-allocations-toolbar' id='build-order-allocation-table'></table>
    </div>
    {% endif %}

    {% if item.part.salable %}
    <div class='panel-heading'>
        <h4>{% trans "Sales Order Allocations" %}</h4>
        {% include "spacer.html" %}
    </div>
    <div class='panel-content'>
        <div id='sales-order-allocations-toolbar'>
            {% include "filter_list.html" with id="salesorderallocation" %}
        </div>
        <table class='table table-striped table-condensed' data-toolbar='#sales-order-allocations-toolbar' id='sales-order-allocation-table'></table>
    </div>
    {% endif %}
</div>

<div class='panel panel-hidden' id='panel-children'>
    <div class='panel-heading'>
        <h4>{% trans "Child Stock Items" %}</h4>
        {% include "spacer.html" %}
    </div>
    <div class='panel-content'>
        {% if item.child_count > 0 %}
        {% include "filter_list.html" with id="stock-childs" %}
        {% include "stock_table.html" with prefix="childs-" %}
        {% else %}
        <div class='alert alert-block alert-info'>
            {% trans "This stock item does not have any child items" %}
        </div>
        {% endif %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-test-data'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Test Data" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button type='button' class='btn btn-outline-secondary' id='test-report'>
                    <span class='fas fa-file-pdf'></span> {% trans "Test Report" %}
                </button>
                {% if user.is_staff %}
                <button type='button' class='btn btn-danger' id='delete-test-results'>
                    <span class='fas fa-trash-alt'></span> {% trans "Delete Test Data" %}
                </button>
                {% endif %}
                <button type='button' class='btn btn-success' id='add-test-result'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Test Data" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='test-button-toolbar'>
            {% include "filter_list.html" with id="stocktests" %}
        </div>

        <table class='table table-striped table-condensed' data-toolbar='#test-button-toolbar' id='test-result-table'></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-attachments'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Attachments" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "attachment_button.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "attachment_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-notes'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Stock Item Notes" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "notes_buttons.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <textarea id='stock-notes'></textarea>
    </div>
</div>

<div class='panel panel-hidden' id='panel-installed-items'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Installed Stock Items" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.stock.add %}
                <button type='button' class='btn btn-success' id='stock-item-install'>
                    <span class='fas fa-plus-circle'></span> {% trans "Install Stock Item" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='installed-table-toolbar'>
            {% include "filter_list.html" with id='installed-items' %}
        </div>
        <table class='table table-striped table-condensed' id='installed-table' data-toolbar='#installed-table-toolbar'></table>
    </div>
</div>

{% endblock page_content %}

{% block js_ready %}
{{ block.super }}

    // Load the "allocations" tab
    onPanelLoad('allocations', function() {

        {% if item.part.component %}
        loadBuildOrderAllocationTable('#build-order-allocation-table', {
            params: {
                stock_item: {{ item.pk }},
            }
        });
        {% endif %}

        {% if item.part.salable %}
        loadSalesOrderAllocationTable('#sales-order-allocation-table', {
            params: {
                stock_item: {{ item.pk }},
            }
        });
        {% endif %}
    });

    $('#stock-item-install').click(function() {

        installStockItem({{ item.pk }}, {{ item.part.pk }}, {
            onSuccess: function(response) {
                $("#installed-table").bootstrapTable('refresh');
            }
        });
    });

    loadInstalledInTable(
        $('#installed-table'),
        {
            stock_item: {{ item.pk }},
            part: {{ item.part.pk }},
            quantity: {{ item.quantity|unlocalize }},
        }
    );

    onPanelLoad('notes', function() {
        setupNotesField(
            'stock-notes',
            '{% url "api-stock-detail" item.pk %}',
            {
                {% if roles.stock.change and user_owns_item %}
                editable: true,
                {% else %}
                editable: false,
                {% endif %}
            }
        );
    });

    onPanelLoad('attachments', function() {
        loadAttachmentTable('{% url "api-stock-attachment-list" %}', {
            filters: {
                stock_item: {{ item.pk }},
            },
            fields: {
                stock_item: {
                    value: {{ item.pk }},
                    hidden: true,
                }
            }
        });
    });

    loadStockTestResultsTable(
        $("#test-result-table"), {
            part: {{ item.part.id }},
            stock_item: {{ item.id }},
        }
    );

    $("#test-report").click(function() {
        printReports({
            items: [{{ item.pk }}],
            key: 'item',
            url: '{% url "api-stockitem-testreport-list" %}',
        });
    });

    {% if user.is_staff %}
    $("#delete-test-results").click(function() {

        var url = '{% url "api-stock-test-result-list" %}';

        inventreeGet(
            url,
            {
                stock_item: {{ item.pk }},
            },
            {
                success: function(response) {

                    var items = [];

                    // Ensure that we are only deleting the correct test results
                    response.forEach(function(result) {
                        items.push(result.pk);
                    });

                    var html = `
                    <div class='alert alert-block alert-danger'>
                        {% trans "Delete all test results for this stock item" %}
                    </div>`;

                    constructForm(url, {
                        form_data: {
                            items: items,
                            filters: {
                                stock_item: {{ item.pk }},
                            }
                        },
                        multi_delete: true,
                        method: 'DELETE',
                        title: '{% trans "Delete Test Data" %}',
                        preFormContent: html,
                        refreshTable: '#test-result-table',
                    });
                }
            }
        );
    });
    {% endif %}

    $("#add-test-result").click(function() {

        constructForm('{% url "api-stock-test-result-list" %}', {
            method: 'POST',
            fields: stockItemTestResultFields({
                stock_item: {{ item.pk }},
            }),
            title: '{% trans "Add Test Result" %}',
            refreshTable: '#test-result-table',
        });
    });

    {% if item.child_count > 0 %}
    loadStockTable($("#childs-stock-table"), {
        params: {
            ancestor: {{ item.id }},
        },
        name: 'item-childs',
        filterTarget: '#filter-list-stock-childs',
        filterKey: 'stock',
    });
    {% endif %}

    loadStockTrackingTable($("#track-table"), {
        params: {
            ordering: '-date',
            item: {{ item.pk }},
            user_detail: true,
        },
        url: "{% url 'api-stock-tracking-list' %}",
    });

    enableSidebar('stockitem');

{% endblock js_ready %}
